Imagemap Export for Web Diagramming Using Visual Thought


Introduction

Visual Thought now exports clickable imagemap information from its documents. Objects in your Visual Thought document automatically become hot zones in your Web page, allowing you to create instant Web diagrams with URL links already defined! Why fuss with laboriously defining your own imagemaps when Visual Thought can do it all for you in one step?

Supported customers can obtain the plug-in translators that export imagemaps free of charge by sending email to info@confluent.com.

Some Examples

Here are some examples of images and imagemaps created with Visual Thought. This is an image that uses a server-side imagemap:

When you move your mouse over the image, your browser's status line displays raw coordinates on the image. Only when you actually click do you discover whether you'll be linked anywhere.

Here is the same image using a client-side imagemap (which won't work unless your browser supports client-side imagemaps):

Notice that when you move your cursor over hot zones in the image using the client-side imagemap, the cursor changes and your browser's status line displays the linked URL. The feedback and interactivity of client-side imagemaps is an improvement over server-side imagemaps.

Support for server-side imagemaps is almost ubiquitous, but browsers supporting client-side imagemaps are becoming increasingly common. For example, both Netscape 2.0 and Microsoft's Internet Explorer 2.0 support client-side imagemaps, which probably means that you'd want to export client-side imagemaps for your web site.

Visual Thought exports both server-side and client-side imagemaps. If you want to try it yourself, here is the original document from which the images and maps of these examples were derived. (mapexample.tar.Z 6kb)

For another, more extensive example, please see our Index of Major HTML Pages.

How To Create Imagemaps with Visual Thought

Here's how to use Visual Thought to export your diagrams to the Web.

  1. Export the image

    Choose the File->Export... menu item, select the Compuserve GIF87A File Type, select Document as What to Save, then click OK. This exports your document as a GIF image.

    Important note: As provided, the imagemap module only writes hot zone information for shapes that have file attachments (created using the File Attachment panel of the Inspector). This is because there are often many different shapes in a docuemnt (such as the invisible shapes that enclose free text), and you won't usually want to hotlink all of them. You can tell that a shape has a file attachment because it will display a round activation button at its lower right corner. You can specify the absolute path to a file attachment with a file chooser by clicking the "Open" button in the File Attachment panel. You can also specify any text you want as the attachment by typing directly into the File Attachment text field itself.

    Less important note: The imagemap module can be almost infinitely configured to export information in the form that you need. For example, it can be easily made to write hot zone information only for ellipses in your document containing the text "URL." For more information on how to customize the imagemap module, please send email to info@confluent.com. If you are a UNIX shell script hacker, you should easily be able to make the modifications yourself.

  2. Export the imagemap

    Choose the File->Export... menu item. Then select either of two imagemap formats as the File Type; either NCSA HTTPd server-side imagemap or Spyglass client-side imagemap. Select Document as What to Save. Click OK. Visual Thought will extract information about all objects that have attachments from your document and write out those objects as hot zones in the imagemap.

    The two imagemap formats Visual Thought supports are:

  3. Write the HTML to link the image to the map

    Last, reference the GIF image and imagemap from your HTML document. If your image is named web.gif and the imagemap is a client-side imagemap named web.map defining a map named testmap, use a line like this: 

       <img src="images/web.gif" usemap="images/web.map#testmap">
    You can also insert the web.map file into your HTML file to avoid the reference to the map file, in which case a fragment of the HTML file would look like: 
       <map name="testmap">
   ... deleted lines ...
   </map>
   <img src="images/web.gif" usemap="#testmap">
    If web.map is a server-side imagemap, you'll need a syntax like this: 
       <a href="http://www.confluent.com/cgi-bin/imagemap/images/web.map">
   <img src="images/web.gif" ismap>
   </a>
    where the http://www.confluent.com/cgi-bin/imagemap is a system-defined path to your map in images/web.map.

    You can combine the two imagemap types into one. Browsers that support client-side maps will use the client-side map info, and browsers that don't will use the server-side map info. 

       <a href="http://www.confluent.com/cgi-bin/imagemap/images/webserver.map">
   <img src="images/web.gif" ismap usemap="images/webclient.map#testmap">
   </a>
    assuming webserver.map and webclient.map are map files containing server-side and client-side maps, respectively.
© 1996, 1997 Confluent, Inc. All rights reserved.


Confluent, Inc. * 400 Spear Street, Suite 207 * San Francisco, CA 94105
800-780-2838 and 415-764-1000 tel * 415-764-1008 fax * info@confluent.com

Please send comments about this web site to:

webmaster@confluent.com